import React, { useState, useEffect } from 'react';
import { Button, Card, message, Result, Tabs, Typography, Divider } from 'antd';
import axios from '../services/api';

const { Title, Text, Paragraph } = Typography;
const { TabPane } = Tabs;

const ApiTestPage = () => {
  const [loading, setLoading] = useState(false);
  const [axiosResult, setAxiosResult] = useState(null);
  const [fetchResult, setFetchResult] = useState(null);
  const [envInfo, setEnvInfo] = useState(null);

  // 获取环境变量信息
  useEffect(() => {
    const info = {
      apiBaseUrl: import.meta.env.VITE_API_BASE_URL,
      withCredentials: true,
      browserOrigin: window.location.origin
    };
    setEnvInfo(info);
  }, []);

  // 使用axios测试连接
  const testAxiosConnection = async () => {
    setLoading(true);
    setAxiosResult(null);
    try {
      console.log('使用Axios发送请求到:', import.meta.env.VITE_API_BASE_URL + '/auth/login');
      // 尝试一个简单的请求（登录接口不需要认证）
      const response = await axios.post('/auth/login', {
        phone: 'test',
        password: 'test'
      });
      
      setAxiosResult({
        success: true,
        message: 'API连接成功！',
        data: response.data
      });
      message.success('Axios API连接成功！');
    } catch (error) {
      console.error('Axios请求错误详情:', error);
      // 即使认证失败，只要能收到响应也说明跨域配置正确
      if (error.response) {
        setAxiosResult({
          success: true,
          message: 'API连接成功，但认证失败（这是正常的）！',
          status: error.response.status,
          error: error.response.data,
          corsStatus: '后端已接收请求但拒绝了访问（403 Forbidden）'
        });
        message.success('Axios API连接成功！');
      } else if (error.request) {
        setAxiosResult({
          success: false,
          message: 'API连接失败！',
          error: error.message,
          corsStatus: '未收到后端响应，可能是CORS配置问题或网络问题'
        });
        message.error('Axios API连接失败：' + error.message);
      } else {
        setAxiosResult({
          success: false,
          message: 'API连接失败！',
          error: error.message,
          corsStatus: '请求配置错误'
        });
        message.error('Axios API连接失败：' + error.message);
      }
    } finally {
      setLoading(false);
    }
  };

  // 使用原生fetch测试连接
  const testFetchConnection = async () => {
    setLoading(true);
    setFetchResult(null);
    try {
      console.log('使用Fetch发送请求到:', import.meta.env.VITE_API_BASE_URL + '/auth/login');
      const response = await fetch('/auth/login', {
        method: 'POST',
        credentials: 'include', // 允许携带凭证
        headers: {
          'Content-Type': 'application/json',
        },
        body: JSON.stringify({
          phone: 'test',
          password: 'test'
        })
      });
      
      console.log('Fetch响应状态:', response.status);
      
      if (!response.ok) {
        let errorData = null;
        try {
          errorData = await response.json();
        } catch (e) {
          errorData = { message: '无法解析错误响应' };
        }
        
        setFetchResult({
          success: true,
          message: 'API连接成功，但认证失败（这是正常的）！',
          status: response.status,
          error: errorData,
          corsStatus: '后端已接收请求但拒绝了访问（403 Forbidden）'
        });
        message.success('Fetch API连接成功！');
        return;
      }
      
      const data = await response.json();
      setFetchResult({
        success: true,
        message: 'API连接成功！',
        data: data
      });
      message.success('Fetch API连接成功！');
    } catch (error) {
      console.error('Fetch请求错误详情:', error);
      setFetchResult({
        success: false,
        message: 'API连接失败！',
        error: error.message,
        corsStatus: '跨域请求被浏览器阻止'
      });
      message.error('Fetch API连接失败：' + error.message);
    } finally {
      setLoading(false);
    }
  };

  return (
    <div style={{ padding: '24px', maxWidth: '800px', margin: '0 auto' }}>
      <Card title="API连接测试与分析">
        {/* 环境信息 */}
        <div style={{ marginBottom: '24px', padding: '16px', backgroundColor: '#f6ffed', border: '1px solid #b7eb8f', borderRadius: '6px' }}>
          <Title level={5}>前端配置信息</Title>
          <Paragraph>
            <Text strong>API基础URL:</Text> {envInfo?.apiBaseUrl} <br />
            <Text strong>浏览器来源:</Text> {envInfo?.browserOrigin} <br />
            <Text strong>跨域凭证设置:</Text> {envInfo?.withCredentials ? '已启用(withCredentials: true)' : '未启用'}
          </Paragraph>
        </div>
        
        <Divider />
        
        {/* 问题分析 */}
        <div style={{ marginBottom: '24px', padding: '16px', backgroundColor: '#fff2f0', border: '1px solid #ffccc7', borderRadius: '6px' }}>
          <Title level={5}>问题分析</Title>
          <Paragraph>
            根据浏览器开发者工具显示的错误信息，这是一个<span style={{ color: 'red', fontWeight: 'bold' }}>后端配置问题</span>。
          </Paragraph>
          <Paragraph>
            <Text strong>具体原因:</Text> 浏览器发送的OPTIONS预检请求被后端服务器拒绝，返回了403 Forbidden状态码。
            这表明后端服务器没有正确配置CORS策略来允许来自前端的跨域请求。
          </Paragraph>
        </div>
        
        <Tabs defaultActiveKey="1" type="card">
          <TabPane tab="Axios测试" key="1">
            <Button type="primary" onClick={testAxiosConnection} loading={loading} style={{ marginBottom: '16px' }}>
              使用Axios测试连接
            </Button>
            {axiosResult && (
              <Result
                status={axiosResult.success ? 'success' : 'error'}
                title={axiosResult.message}
                extra={
                  <div style={{ backgroundColor: '#f9f9f9', padding: '16px', borderRadius: '6px', marginTop: '16px' }}>
                    {axiosResult.corsStatus && (
                      <Text type={axiosResult.success ? "success" : "danger"} strong style={{ display: 'block', marginBottom: '8px' }}>
                        {axiosResult.corsStatus}
                      </Text>
                    )}
                    <pre style={{ whiteSpace: 'pre-wrap', wordBreak: 'break-all' }}>
                      {JSON.stringify(axiosResult, null, 2)}
                    </pre>
                  </div>
                }
              />
            )}
          </TabPane>
          <TabPane tab="原生Fetch测试" key="2">
            <Button type="primary" onClick={testFetchConnection} loading={loading} style={{ marginBottom: '16px' }}>
              使用原生Fetch测试连接
            </Button>
            {fetchResult && (
              <Result
                status={fetchResult.success ? 'success' : 'error'}
                title={fetchResult.message}
                extra={
                  <div style={{ backgroundColor: '#f9f9f9', padding: '16px', borderRadius: '6px', marginTop: '16px' }}>
                    {fetchResult.corsStatus && (
                      <Text type={fetchResult.success ? "success" : "danger"} strong style={{ display: 'block', marginBottom: '8px' }}>
                        {fetchResult.corsStatus}
                      </Text>
                    )}
                    <pre style={{ whiteSpace: 'pre-wrap', wordBreak: 'break-all' }}>
                      {JSON.stringify(fetchResult, null, 2)}
                    </pre>
                  </div>
                }
              />
            )}
          </TabPane>
        </Tabs>
        
        <Divider />
        
        {/* 解决方案建议 */}
        <div style={{ marginTop: '24px', padding: '16px', backgroundColor: '#e6f7ff', border: '1px solid #91d5ff', borderRadius: '6px' }}>
          <Title level={5}>解决方案建议</Title>
          <Paragraph>
            这是一个后端问题，需要后端开发人员进行以下配置调整:
          </Paragraph>
          <ol>
            <li>在后端服务器上配置正确的CORS策略，允许来自{envInfo?.browserOrigin}的跨域请求</li>
            <li>确保服务器正确处理OPTIONS预检请求，并返回适当的CORS响应头，包括:
              <ul>
                <li>Access-Control-Allow-Origin: {envInfo?.browserOrigin}</li>
                <li>Access-Control-Allow-Methods: GET, POST, PUT, DELETE, OPTIONS</li>
                <li>Access-Control-Allow-Headers: Content-Type, Authorization</li>
                <li>Access-Control-Allow-Credentials: true</li>
              </ul>
            </li>
            <li>确保/auth/login接口允许未认证的访问（因为这是登录接口）</li>
          </ol>
        </div>
      </Card>
    </div>
  );
};

export default ApiTestPage;